html,body{
    background-color: #f4f4f4;
}

nav{
    padding: 4vw 0;
    background-color: #fbfbfb;
    font-size: 5vw;
    color: #333;
    text-align: center;
    border: 0.1vw solid #ececec;
}

.banner{
 
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding: 3vw;
    /* overflow: hidden; */
    background-color: #fff;
}
.banner img{

    width: 89vw;
    height: 49vw;
    max-width: 100%;
}

.banner_b{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 3vw;
    padding-bottom: 6vw;
    margin-bottom: 3vw;
    background-color: #fff;
}
.banner_b .item {
    text-align: center;
}
.banner_b .item img{
    margin-bottom: 3vw;
    width: 22vw;
    height: 22vw;
    max-width: 100%;

}
.banner_b .item .txt{
    font-size: 3vw;
    color: #333;
}



.selection{
    padding: 3vw ;
    padding-bottom: 6vw;
    margin-bottom: 3vw;
    background-color: #fff;
}
.selection .tittle{
    padding: 5vw 0;
    text-align: center;
    font-size: 4vw ;
    color: #333;
}  
.selection .content_top{
    margin-bottom: 3vw;
    border: 0.2vw solid #ececec;
    padding-bottom: 8vw;
}  
.selection .content_top img{
    width: 95vw;
    height: 53vw;
    max-width: 100%;
}
.selection .content_top .par{
    margin: 4vw 0;
    font-size: 4vw;
    color: #333;
}
.selection .content_top .par_b{
    font-size: 3vw;
    color: #999;
}

.selection .content_middle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;
    margin-bottom: 3vw;
    border: 0.2vw solid #ececec;

}
.selection .content_middle .up{
    margin-bottom: 3vw;
    font-size: 4vw;
    color: #333;
}
.selection .content_middle .down{
    font-size: 3vw;
    color: #999;
}
.selection .content_middle img{
    width: 31vw;
    height: 31vw;
    max-width: 100%;
}

.selection .content_bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;
    border: 0.2vw solid #ececec;

}
.selection .content_bottom .up{
    margin-bottom: 3vw;
    font-size: 4vw;
    color: #333;
}
.selection .content_bottom .down{
    font-size: 3vw;
    color: #999;
}
.selection .content_bottom img{
    margin-left: 6vw;
    width: 31vw;
    height: 31vw;
    max-width: 100%;
}


.ten_time{
    padding: 3vw;
    margin-bottom: 3vw;
    background-color: #fff;
    text-align: center;
}
.ten_time .tittle{
    padding: 3vw 0;
    text-align: center;
     font-size: 4vw;
     color: #333;
}
.ten_time .content{
    padding: 0 2vw;
    padding-bottom: 22vw;
    width: 76vw;
    border: 2vw solid #ececec;
}
.ten_time .content .top{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6vw;
}
.ten_time .content .txt{
    margin: 0 2vw;
    font-size: 3vw;
    color: #999;
}
.ten_time .content .line{
    width: 3vw;
    height: 0.2vw;
    background-color: #8a8a8a;
}

.recommend{
    padding: 3vw;
     margin-bottom: 3vw       ;
    background-color: #fff;
    
}
.recommend .tittle{
    margin-bottom: 5vw;
    font-size: 4vw;
    color: #333;
    text-align: center;
}
.recommend .content{
    padding-bottom: 3vw;
    border: 0.2vw solid #ececec;
}
.recommend img{
    width: 95vw;
    height: 53vw;
    max-width: 100%;
}
.recommend .txt{
    margin: 5vw 3vw;
    font-size: 4vw;
    color: #333;
}
.recommend .par{
    margin-left: 3vw;
    font-size: 3vw;
    color: #999;
}



.hoom_look .tittle{
    padding: 3vw 0;
    margin-bottom: 3vw;
    font-size: 4vw;
    color: #333;
    background-color: #fff;
    text-align: center;
}
.hoom_look .item{
    margin:0 2vw;
    padding: 1vw 5vw;
    padding-bottom: 3vw;
    margin-bottom: 3vw;
    background-color: #fff;
}
.hoom_look .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hoom_look .content .left img{
    width: 62vw;
    height: 53vw;
    max-width: 100%;
}
.hoom_look .content .right{
    width: 26vw;
    /* text-align: right; */
}
.hoom_look .content .right img{
    width: 26vw;
    height: 26vw;
    max-width: 100%;
}
.hoom_look .item .par{
    margin-top: 4vw;
    font-size: 3vw;
    color: #333;
}

.hoom_look .block{
     /* margin-top: 3vw; */
     margin: 3vw 2vw;
     padding: 5vw;
     background-color: #fff;
}
.hoom_look .block:last-child{
    margin-bottom: 20vw;
}
.hoom_look .block img{
    width: 89vw;
    height: 53vw;
    max-width: 100%;
}
.hoom_look .block .text{
    margin-top: 4vw;
    font-size: 3vw;
    color: #333;
}


footer{
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin:  auto;
    /* width: 100vw; */
    /* transform: translateX(-25%); */
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    padding: 3vw 8vw;
    background-color: #fff;
    border-top: 0.1vw solid #cecece;
}
footer .block{
    text-align: center;
}
footer .block img{
    margin-bottom: 2vw;
    width: 5vw;
    height: 5vw;
    max-width: 100%;
}
footer .block .write{
    font-size: 2vw;
    color: #555;
}